<template>
  <el-dialog
    v-bind="attrs"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    v-on="listeners"
  >
    <el-form
      ref="elFormRef"
      :model="value"
      :rules="rule"
    >
      <el-form-item
        prop="type"
        label="通知类型"
      >
        <el-select
          v-model="value.type"
          placeholder="请选择通知类型"
          :disabled="!!value.id"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        prop="userIds"
        label="通知人员"
      >
        <el-button
          type="text"
          @click="openSelectList"
        >
          {{ userChooseTitle }}
        </el-button>
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>

    <UserSelectListDialog
      v-model="value.userIds"
      :visible.sync="selectListVisible"
      :type-options="typeOptions"
      :type="value.type"
      :user-list-backup="userListFormat"
      width="712px"
      @onConfirm="selectConfirm"
    />
  </el-dialog>
</template>
<script>
import UserSelectListDialog from '@/views/noticeUserSetting/components/UserSelectListDialog.vue'
import { getAllUser } from '@/api/v2/personnel'
export default {
  name: '',
  components: {
    UserSelectListDialog
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    typeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectListVisible: false,
      params: {
        type: 2
      },
      userList: [],
      loading: false,
      rule: {
        type: [
          { required: true, message: '请选择通知类型', trigger: ['blur', 'change'] }
        ],
        userIds: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value.length <= 0) {
                callback(new Error('请选择通知人员'))
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    attrs() {
      const attrs = { ...this.$attrs }
      return attrs
    },

    listeners() {
      const listeners = { ...this.$listeners }

      return listeners
    },

    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    },

    userListFormat() {
      return this.userList.map(item => {
        return {
          id: item.id,
          username: item.username,
          head_portrait: item.head_portrait
        }
      })
    },

    userChooseTitle() {
      const len = this.value.userIds.length
      return len > 0 ? `已选择${len}人` : '选择人员'
    },

    isEdit() {
      return !!this.value.id
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    openSelectList() {
      this.selectListVisible = true
    },

    async getUsers() {
      this.loading = true
      try {
        const res = await getAllUser(this.params)
        this.userList = res.data
      } catch (e) {
        console.log('e --------->', e)
        throw new Error(e?.response?.data?.message || '用户列表获取失败')
      } finally {
        await this.sleep()
        this.loading = false
      }
    },

    sleep(t = 500) {
      return new Promise(resolve => setTimeout(resolve, t))
    },

    onPageChange(e) {
      this.params.page = e
      this.getUsers()
    },

    onSearch(e) {
      this.params.username = e.keyword
      this.params.page = e.page
      this.getUsers()
    },

    handleCancel() {
      this.resetFields()
      this.close()
    },

    resetFields() {
      this.$refs.elFormRef.resetFields()
    },

    handleConfirm() {
      this.$refs.elFormRef.validate(valid => {
        if (valid) {
          this.$emit('onConfirm', this.value)
          // this.close()
        }
      })
    },

    close() {
      this.$emit('update:visible', false)
    },

    selectConfirm() {
      this.$refs.elFormRef.clearValidate('userIds')
    }
  }
}
</script>
<style lang="scss" scoped>

.footer {
  display: flex;
  justify-content: end;
}
</style>
